{% extends "base.html" %}

{% import 'includes/forms.html' as forms %}

{% block style_block %}  
   <link href="/static/css/bootstrap-2.1.css" rel="stylesheet" />
  <style type='text/css'>

body {
	margin-top: 20px;
}

#wrapp {
	background-color: #fff;
	margin-top: 5px;
}

.navbar-inner {
	padding-left: 20px;
	padding-right: 20px;
	background-color: #2C2C2C;
	background-image: -moz-linear-gradient(top, #333, #222);
	background-image: -ms-linear-gradient(top, #333, #222);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
	background-image: -webkit-linear-gradient(top, #333, #222);
	background-image: -o-linear-gradient(top, #333, #222);
	background-image: linear-gradient(top, #333, #222);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: white;
text-shadow: 0 1px 0 black;
}

.help-block {
    font-style: italic;
    margin-top: .5em;
}
.group {
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    background-color: whiteSmoke;
    padding: 20px 0 0;
}

.control-label {
    font-weight: bold;
}

label.event {
 margin-top: -1em;
}

label.event input{
    margin-top: 1em;
}


label.character{
 margin-top: -1em;

}

label.character input {
    margin-top: 1em;
}

.desc strong {
    font-size: 85%;
}
.subdued {
    opacity: .5;
}
.reqired:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #B94A48;
    border-radius: 100%;
}

input.error, textarea.error, select.error {
	border-color: #B94A48;
}

.label.error {
	position: absolute;
	margin-left: 160px;
}

.game {
	display: none;
	margin-top: -1em;
}

.game.info {
	display: block;
}

  </style>
{% endblock %}
{% block head_script %}<!-- defer-incapable JS block -->
{% endblock %}
{% block content %}
<div class="page-header"><h1>Enlist for service on the Monitor Celestra here!</h1></div>

    <div class="row">
        <p><em>(Please note: the form apparently does not work well with Internet Explorer, sorry about that. We'll look into it as soon as we can.)</em></p>
        
<form class="form-horizontal" method="POST" action="{{ action }}" enctype="multipart/form-data">
    
<section class="group">

  <div class="control-group">
    <label class="control-label" for="{{ form.game.id }}">Date</label>
    <div class="controls controls-row">
    {% for f in form.game %}
      <label class="radio span2 event">
          <input type="radio" name="{{ f.name }}" id="{{ f.id }}" value="{{ f.data }}"> 
          <h4>{{ f.label.text.split(';')[0]|safe }}</h4>
          <p><strong>{{ f.label.text.split(';')[1]|safe }}</strong></p>
      </label>
    {% endfor %}
    </div>
    {{ forms.form_field_errors(form.game) }}
  </div>
       
  <div class="control-group">
    <label class="control-label" for="{{ form.character_class.id }}">Character class</label>
    {{ forms.form_field_errors(form.character_class) }}        
    <a href="#" id="helpinfo" rel="popover" data-content="The price variation is due to the different costume requirements for different characters." data-title="Character classes" data-placement="right">&nbsp;<i class="icon-question-sign"></i></a>

    <div class="controls controls-row subdued info game">
		<div class="well well-large">
			<span class="label label-info">info</span> Picka a game date before character class, please.
		</div>
	</div>

    <div class="controls controls-row subdued g1 game">
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g1a"><h4>Class A</h4>
          <h5 class="price">2400 SEK <small>(<span id="g1a">&hellip;</span> available)</small></h5>
          <span class="desc">Civilians, including Vergis Corportation suits, political officials and refugees. <strong>Requires player to provide basic outfit.</strong></span>
      </label>
        
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g1b"><h4>Class B</h4>
          <h5 class="price">2800 SEK <small>(<span id="g1b">&hellip;</span> available)</small></h5>
          <span class="desc">Celestra crew, Vergis Corporation scientists, Colonial military ensigns.</span>
      </label>

      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g1c"><h4>Class C</h4>
          <h5 class="price">3400 SEK <small>(<span id="g1c">&hellip;</span> available)</small></h5>
          <span class="desc">Colonial military officers, marines, Vergis security, pilots and similar.</span>
      </label>        
    </div>


    <div class="controls controls-row subdued g2 game">
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g2a"><h4>Class A</h4>
          <h5 class="price">2400 SEK <small>(<span id="g2a">&hellip;</span> available)</small></h5>
          <span class="desc">Civilians, including Vergis Corportation suits, political officials and refugees. <strong>Requires player to provide basic outfit.</strong></span>
      </label>
        
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g2b"><h4>Class B</h4>
          <h5 class="price">2800 SEK <small>(<span id="g2b">&hellip;</span> available)</small></h5>
          <span class="desc">Celestra crew, Vergis Corporation scientists, Colonial military ensigns.</span>
      </label>

      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g2c"><h4>Class C</h4>
          <h5 class="price">3400 SEK <small>(<span id="g2c">&hellip;</span> available)</small></h5>
          <span class="desc">Colonial military officers, marines, Vergis security, pilots and similar.</span>
      </label>        
    </div>


    <div class="controls controls-row subdued g3 game">
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g3a"><h4>Class A</h4>
          <h5 class="price">2400 SEK <small>(<span id="g3a">&hellip;</span> available)</small></h5>
          <span class="desc">Civilians, including Vergis Corportation suits, political officials and refugees. <strong>Requires player to provide basic outfit.</strong></span>
      </label>
        
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g3b"><h4>Class B</h4>
          <h5 class="price">2800 SEK <small>(<span id="g3b">&hellip;</span> available)</small></h5>
          <span class="desc">Celestra crew, Vergis Corporation scientists, Colonial military ensigns.</span>
      </label>

      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g3c"><h4>Class C</h4>
          <h5 class="price">3400 SEK <small>(<span id="g3c">&hellip;</span> available)</small></h5>
          <span class="desc">Colonial military officers, marines, Vergis security, pilots and similar.</span>
      </label>        
    </div>


    <div class="controls controls-row subdued g4 game">
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g4a"><h4>Class A</h4>
          <h5 class="price">2400 SEK <small>(<span id="g4a">&hellip;</span> available)</small></h5>
          <span class="desc">Civilians, including Vergis Corportation suits, political officials and refugees. <strong>Requires player to provide basic outfit.</strong></span>
      </label>
        
      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g4b"><h4>Class B</h4>
          <h5 class="price">2800 SEK <small>(<span id="g4b">&hellip;</span> available)</small></h5>
          <span class="desc">Celestra crew, Vergis Corporation scientists, Colonial military ensigns.</span>
      </label>

      <label class="radio span2 character">
          <input type="radio" name="{{ form.character_class.name }}" value="g4c"><h4>Class C</h4>
          <h5 class="price">3400 SEK <small>(<span id="g4c">&hellip;</span> available)</small></h5>
          <span class="desc">Colonial military officers, marines, Vergis security, pilots and similar.</span>
      </label>        
    </div>
  </div>
    
</section>    

    <hr/>
    
<section class="group">  
        
  <div class="control-group">
    <label class="control-label reqired" for="{{ form.firstname.id }}">Name</label>
    <div class="controls controls-row">
      {{ forms.text_field(form.firstname, 'First') }}
      {{ forms.text_field(form.lastname, 'Last') }}
    </div>
  </div>

  <div class="control-group">
    <label class="control-label reqired" for="input_dob_year">Contact</label>
    <div class="controls controls-row">
      {{ forms.text_field(form.email, 'E-mail') }}
      {{ forms.text_field(form.phone, 'Phone') }}
    </div>
  </div>    
    
  <div class="control-group">
    <label class="control-label reqired" for="{{ form.city.id }}">Location</label>
    <div class="controls controls-row">
      <input type="text" class="span3" id="{{ form.city.id }}" placeholder="City">
      {{ form.country(class='input-celestra span3')|safe }}
    </div>
  </div>        


  <div class="control-group">
    <label class="control-label reqired" for="input_dob_year">Date of birth</label>
    <div class="controls controls-row">
        {{ form.dob_year(class='span2') }}
    {{ forms.form_field_errors(form.dob_year) }}
        {{ form.dob_month(class='span2') }}
    {{ forms.form_field_errors(form.dob_month) }}
        {{ form.dob_day(class='span2') }}
    {{ forms.form_field_errors(form.dob_day) }}
    </div>
    <div class="controls controls-row">
        <p class="help-block">Please note: You need to be at least 18 years of age to attend.</p>
    </div>        
  </div>    
    
</section>    

    <hr/>
    
<section class="group">  
        
  <div class="control-group">
    <label class="control-label reqired" for="input_height">Costume information</label>
    <div class="controls controls-row">
        {{ forms.text_field(form.height, 'Height (in cm)') }}
        {{ forms.form_field_errors(form.height) }}        
        {{ form.size(class='span3') }}
        {{ forms.form_field_errors(form.size) }}
    </div>
    <div class="controls controls-row">
        <p class="help-block">Please note: The uniforms are labeled with <strong>male</strong> sizes from the factory. <a href="{{ url_for('static', filename='size_conversion_women_to_men.pdf')}}" target="_blank">Conversion guide</a></p>
    </div>    
  </div>      
    
  <div class="control-group">
      <label class="control-label" for="{{ form.diet.id }}">Dietary restrictions</label>
    <div class="controls controls-row">
      <input type="text" class="span6"  name="{{ form.diet.name }}" valid="{{ form.diet.id }}" placeholder="Vegetarian, halal, kosher, etc...">    
    </div>
  </div>       
    
  <div class="control-group">
      <label class="control-label" for="{{ form.allergies.id }}">Medical conditions</label>
    <div class="controls controls-row">
      <input type="text" class="span6"  name="{{ form.allergies.name }}" valid="{{ form.allergies.id }}" placeholder="Allergies or other that we need to be aware of...">    
    </div>
      
    <div class="controls controls-row">
        <p class="help-block">Please note: This information is confidential.</p>
    </div>       
  </div>  
    
</section>    

    <hr/>
    
<section class="group">  
        
  <div class="control-group">
    <label class="control-label" for="input_info">Experience</label>
    <div class="controls controls-row">
        {{ form.bsg_pre_knowledge(class='span3') }}
        {{ forms.form_field_errors(form.bsg_pre_knowledge) }}
        <label class="checkbox span3">
            <input type="checkbox"  name="{{ form.pre_larp_experience.name }}" valid="{{ form.pre_larp_experience.id }}"> This is my first LARP!
        </label>   
        
    </div>
      
    <div class="controls controls-row">
        <p class="help-block">Please note: Experience with LARP or the BSG universe is not required.</p>
    </div>    
  </div>  
    
  <div class="control-group">
    <label class="control-label" for="{{ form.character_comments.id }}">Character wishes</label>
    <div class="controls controls-row">
      <textarea rows="2" class="span6" name="{{ form.character_comments.name }}" id="{{ form.character_comments.id }}"></textarea>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="{{ form.coplayer_comments.id }}">Co-player wishes</label>
    <div class="controls controls-row">
      <textarea rows="2" class="span6" name="{{ form.coplayer_comments.name }}" id="{{ form.coplayer_comments.id }}"></textarea>      
    </div>
  </div>       
    
  <div class="control-group">
    <label class="control-label" for="{{ form.other_comments.id }}">Notes to the organizers</label>
    <div class="controls controls-row">
      <textarea rows="2" class="span6" name="{{ form.other_comments.name }}" id="{{ form.other_comments.id }}"></textarea>      
    </div>
  </div>  
    
</section>    

    <hr/>
    
<section class="group">  
        
  <div class="control-group">
    <label class="control-label" for="{{ form.bed_thur_friday.id }}">Extra hostel nights</label>
    <a href="#" id="helpinfo2" rel="popover" data-content="This will book you at the same hostel that you will be staying during nightly game breaks and by doing so here you'll benefit from our discounted price (sheets inluded). We recommend this option if you're travelling to Gothenburg." data-title="Extra hostel nights" data-placement="right">&nbsp;<i class="icon-question-sign"></i></a>
    <div class="controls controls-row">
      <label class="checkbox span2">
        <input type="checkbox" name="{{ form.bed_thur_friday.name }}" id="{{ form.bed_thur_friday.id }}"> Thursday - Friday, (+150 SEK)
      </label>
        
      <label class="checkbox span2">
        <input type="checkbox" name="{{ form.bed_sun_monday.name }}" id="{{ form.bed_sun_monday.id }}"> Sunday - Monday, (+150 SEK)
      </label>

      <label class="checkbox span2">
        <input type="checkbox" name="{{ form.breakfasts.name }}" id="{{ form.breakfasts.id }}"> Breakfast for extra nights, well mornings really, but you get it, (+35 SEK)
      </label>        
    </div>
  </div>
    
  <div class="control-group">
    <label class="control-label" for="{{ form.tshirt.id }}">Swag!</label>
    <div class="controls controls-row">
      <label class="checkbox span6">
        <input type="checkbox" name="{{ form.tshirt.name }}" id="{{ form.tshirt.id }}"> Unique Celestra souvenir T-shirt (+200 SEK)
      </label>
    </div>
  </div>    
    
  <div class="control-group">
    <label class="control-label" for="{{ form.share_to_facebook.id }}">Brag!</label>
    <div class="controls controls-row">
      <label class="checkbox span6">
        <input type="checkbox" checked="checked" name="{{ form.share_to_facebook.name }}" id="{{ form.share_to_facebook.id }}"> Anounce your enlistment on Facebook!
      </label>
    </div>
  </div> 
    
    
  <div class="control-group">
    <label class="control-label" for="{{ form.toc.id }}">Legal</label>
    <div class="controls controls-row">
      <label class="checkbox span6">
          <input type="checkbox" checked="checked" name="{{ form.toc.name }}" id="{{ form.toc.id }}"> Yes, I accept the <a href="#termsandconditions" data-toggle="modal">terms and conditions</a>.
      </label>
    </div>
  </div> 
    
</section>    

    <hr/>
    <div class='luring'>
      <input class="luring" name="{{ form.message.name }}" id="{{ form.message.id }}" type="text" style="display: none;"/>
    </div>
    {{ form.csrf_token() }}
    <div class="form-actions">
      <button type="submit" class="btn btn-large btn-success">To Payment!</button>
      <button type="button" class="btn btn-large">Cancel</button>
      <div class="row">
        <p class="help-block">Please note: Your enlistment is only secured for three days (+ bank processing delay) if we don't receive 
        the minimum registration fee of 1000 SEK. </p>
      </div>         
    </div>      
    
</form>
        
    </div>
{% include 'termsandconditions.html' %}

{% endblock %}

{% block tail_script %}

{% endblock %}